<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/tao.css"/>
		<script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mobile-common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/tao.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="warp">
			<div id="center">
				<strong id="center-point"></strong>
			</div>
		</div>
		<div id="info" style="display: none;">
			<img src="img/info.jpg"/>
			<div class="info-close"></div>
		</div>
		<div id="video-bt">
			<audio id='video' src="bgm.mp3" autoplay="autoplay"></audio>
		</div>
		<div id="menu"></div>
		<div id="menu-box">
			<div class="menu-close"></div>
			<div class="part1">
				<div class="title"></div>
				<div class="content">
					<img src="img/menu-li.png"/>
					<img src="img/menu-li.png"/>
					<img src="img/menu-li.png"/>
					<img src="img/menu-li.png"/>
				</div>		
			</div>
			<div class="part1">
				<div class="title"></div>
				<div class="content">
					<img src="img/menu-li.png"/>
					<img src="img/menu-li.png"/>
					<img src="img/menu-li.png"/>
					<img src="img/menu-li.png"/>
				</div>		
			</div>
			<div class="part1">
				<div class="title"></div>
				<div class="content">
					<img src="img/menu-li.png"/>
					<img src="img/menu-li.png"/>
					<img src="img/menu-li.png"/>
					<img src="img/menu-li.png"/>
				</div>		
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var on = 1;
	$('#video-bt').on('click',function(){
		if(on){
			on=0;
			$(this).css({
				backgroundImage: 'url(img/video-off.png)',
			})
			$('#video').get(0).pause();
		}else{
			on=1;
			$(this).css({
				backgroundImage: 'url(img/video-on.png)',
			})
			$('#video').get(0).play();
		}
	})
</script>
